<!--
 * @Author: hu_binbin
 * @Date: 2021-08-04 14:47:50
 * @LastEditTime: 2021-08-13 13:49:23
 * @Description: 柱状图
-->

<template>
    <div id="barChart" :style="{width: '350px', height: '150px'}"></div>
</template>
<script>
export default {
    name: 'echars',
    props: {
      datasource: {
          type:Array,
          default:[]
      }  
    },
    data () {
        return {
            msg: ''
        }
    },
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('barChart'))
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['特殊', '例行', '全面', '熄灯', '专业'],
                    axisLabel: {
                        show:true,
                        color:'#999',
                    },
                    nameTextStyle:{
                        fontSize:5
                    },
                },
                color:["#79C5B8"],
                yAxis: {
                    type: 'value'
                },
                grid:{
                    x:30,
                    y:10,
                    x2:30,
                    y2:35
                },
                series: [{
                    data: this.datasource,
                    barWidth:15,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            };
            // 绘制图表
            myChart.setOption(option);
        }
    }
}
</script>
<style scoped>
   #barChart {
     margin: auto;
   }
</style>